<script setup>
import ShopGoods from '../../../components/shopGoods/index.vue';
import { useRoute } from 'vue-router';
import { useStore } from 'vuex';
const store = useStore();
const route = useRoute();

store.dispatch('homepage/updateItemList', route.params.id);
store.dispatch('homepage/updateBannerList')
const shopGoodsList = computed(() => store.state.homepage.itemList)
const bannerList = computed(() => store.state.homepage.bannerList)

</script>

<template>
  <div class="shop">
    <div>
      <div class="wapper">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }"><span class="pathSpan">首页</span></el-breadcrumb-item>
        </el-breadcrumb>
        <div class="banner">
          <el-carousel height="500px">
            <el-carousel-item v-for="item in bannerList" :key="item.id">
              <el-image style="width: 100%; height: 100%" :src="item.imgUrl" />
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="all-goods">
          <h1>全部分类</h1>
          <div class="goods-wapper">
            <div
              class="all-items"
              v-for="goods in shopGoodsList.children"
              :key="goods.id"
              :src="goods.picture"
            >
              <el-image style="width: 100px; height: 100px" :src="goods.picture" />
              <span>{{ goods.name }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <ShopGoods
      v-for="item in shopGoodsList.children"
      :key="item.id"
      :mainTitle="item.name"
      :itemList = "item.goods"
    ></ShopGoods>
  </div>
</template>

<style lang="scss" scoped>
  .shop {
    background-color: #F5F5F5;
    margin-top: 20px;
    .wapper {
      width: 1240px;
      margin: 20px auto;
    }
    .banner {
      :deep(.el-carousel__arrow) {
        width: 50px;
        height: 50px;
        .el-icon {
        font-size: 30px;
      }
      }
      :deep(.el-carousel__button) {
        width: 14px;
        height: 14px;
        border-radius: 50%;
      }
    }
      .all-goods {
        margin: 20px 0;
        padding-top: 10px;
        height: 260px;
        text-align: center;
        background-color: #fff;
        h1 {
          font-weight: 400;
          color: #aaa;
          font-size: 28px;
        }
        .goods-wapper {
          display: grid;
          grid-template-columns: repeat(7, 1fr);
          grid-gap: 20px;
          .all-items {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            // 鼠标变小手
            cursor: pointer;
            span {
              display: block;
              margin-top: 5px;
            }
            &:hover {
                color:  #27ba9b;
              }
          }
        }
      }
  }


  .pathSpan {
        display: inline-block;
        margin: 20px 0;
        color: #666;
        font-size: 18px;
      }
</style>
